<template>
    <el-dialog :close-on-click-modal = "false" title="办件查询" :visible.sync="dialogVisible" height="440px" width="500px">
        <ul class="search-ul">
            <li v-for="(item,index) in list" :key="index" @click="onClick(index)" v-bind:class="{'active':index === activeIndex}" class="search-list">
                    <div class="triangle"></div>
                <div class="phone">
                    <span class="target">⊙</span>
                    <span>13666666666</span>
                </div>
                <div class="flex1">《燃气经营许可证核发》</div>
                <div class="date">2019/03/30</div>
            </li>
        </ul>
        <div v-if="activeIndex>-1" class="detail">
            <div class="title-row">办件查询</div>
            <ul class="detail-ul">
                <li v-for="(item,index) in currentList" :key="index" class="detail-li">
                    <div>
                        <span class="accept-text">受理</span>
                        <span>2018/1/17</span>
                    </div>
                    <p class="sub-des-text">提交资料并受理</p>
                    <div class="outer-circle">
                        <div class="inner-circle"></div>
                    </div>
                </li>
            </ul>
        </div>
    </el-dialog>
</template>

<script>
import Pubsub from "../../utils/pubsub";
import {searchWorkbenchList} from "../../config/api";

export default {
    props: {
        list: Array
    },
    data() {
        return {
            dialogVisible: false,
            activeIndex: -1,
            currentList: [1, 23]
        };
    },
     mounted() {
        this.pubsub_token = Pubsub.subscribe("showSearchDialog", (type,args) => {
            // this.dialogVisible = true;
            this.getList(args);
        });
    },
    destroyed() {
        this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
    },
    methods: {
        onClick(index) {
            this.activeIndex = index;
        },
        getList(request){
            searchWorkbenchList(request).then((result)=>{
                console.log(result);
            })
        },
    }
};
</script>

<style lang = "scss" scoped>
.search-ul {
    height: 356px;
    overflow: auto;
}
.search-list {
    background: #eee;
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 20px;
    box-sizing: border-box;
    color: #000;
    .target {
        margin-right: 10px;
    }
    .triangle{
         position: absolute;
        display: none;
        left: -28px;
        height: 0;
        width: 0;
        border-top:24px solid transparent;
        border-bottom:24px solid transparent;
        border-left: 28px solid #fff;
        /* box-shadow: 0.5px 0.9px 2px 0px rgba(153, 153, 153, 0.48); */
        z-index: 9;
    }
    /* &::before {
        position: absolute;
        content: "";
        display: block;
        left: -55px;
        height: 28px;
        width: 28px;
        background-color: transparent;
        box-shadow: 0.5px 0.9px 2px 0px rgba(153, 153, 153, 0.48);
        transform: rotate(45deg);
    } */
    &.active {
        background: #1a36a9;
        color: #fff;
        .triangle{
            display: block;
        }
    }
    .phone {
        flex: 0.7;
    }
}
.detail {
    position: absolute;
    left: -325px;
    background: #fff;
    top: 15px;
    width: 310px;
    height: 415px;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .title-row {
        height: 34px;
        line-height: 34px;
        background: #1a36a9;
        color: #fff;
        padding-left: 15px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    &-ul {
        padding-left: 35px;
        overflow: auto;
        flex: 1;
    }
    &-li {
        padding: 20px 0 20px 20px;
        border-bottom: 1px solid #dcdcdc;
        border-left: 1px solid #1a36a9;
        position: relative;
        &:last-child {
            border-bottom: none;
        }
    }
    .outer-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: -10px;
        top: 20px;
        height: 16px;
        width: 16px;
        border-radius: 16px;
        background: #fff;
        border: 1px solid #1a36a9;
    }
    .inner-circle {
        height: 12px;
        width: 12px;
        background: #1a36a9;
        border-radius: 12px;
    }
    .accept-text {
        color: #1a36a9;
        font-size: 18px;
        margin-right: 10px;
        & + span {
            font-size: 14px;
            color: #888;
        }
    }
    .sub-des-text{
        font-size: 16px;
        margin-top: 10px;
    }
}
</style>